<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <el-form ref="formData" label-width="120px" :model="formData">
        <el-row :gutter="24" class="oneBox">
          <el-col :span="8">
            <el-form-item label="运输任务编号:" prop="transportTaskId">
              <el-input v-model="formData.transportTaskId" placeholder="请输入运输任务编号" style="width:260px" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起始地机构:" prop="startAgencyId">
              <treeselect v-model="formData.startAgencyId" :options="options" :normalizer="normalizer" placeholder="请选择起始地机构" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目的地机构:" prop="endAgencyId">
              <treeselect v-model="formData.endAgencyId" :options="options" :normalizer="normalizer" placeholder="请选择目的地机构" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24" class="oneBox">
          <el-col :span="8">
            <el-form-item label="回车时间:" prop="time">
              <div class="block">
                <el-date-picker
                  v-model="time"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  style="width: 260px;"
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="车辆是否可用:" prop="isAvailable">
              <el-select v-model="formData.isAvailable" placeholder="请选择" style="width:260px">
                <el-option label="全部" value="all" />
                <el-option label="可用" value="true" />
                <el-option label="不可用" value="false" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item>
              <el-button type="primary" style="background-color:#e15536;width:80px" @click="searchFn">搜索</el-button>
              <el-button style="width:80px" @click="resetFn">重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card class="box-card" shadow="never">
      <el-table
        v-loading="loading"
        :data="tableData"
        stripe
        style="width: 100%"
        :header-cell-style="headerCellStyle"
      >
        <el-table-column
          prop="transportTaskId"
          label="运输任务编号"
          width="180"
        />
        <el-table-column
          prop="startAgencyName"
          label="起始地机构"
          width="180"
        />
        <el-table-column
          prop="endAgencyName"
          label="目的地机构"
          width="180"
        />
        <el-table-column
          prop="transportOrderNumber"
          label="运单数量"
          width="120"
        />
        <el-table-column
          prop="outStorageTime"
          label="出车时间"
          width="160"
        />
        <el-table-column
          prop="intoStorageTime"
          label="回车时间"
          width="160"
        />
        <el-table-column
          prop="licensePlate"
          label="车牌号码"
          width="160"
        />
        <el-table-column fixed="right" label="操作">
          <template v-slot="{row}">
            <el-button class="edit" type="text" style="color:#4ea1ff" @click="$router.push(`receipt/${row.id}`)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="center" class="footer">
        <el-pagination
          :current-page="pageData.page"
          :page-sizes="[10, 20, 30, 40, 50]"
          :page-size="pageData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getCarRegisterListApi, getDepartTreeApi } from '@/api/carRegister'
import { convertTime } from '@/utils/index'
// import the component
import Treeselect from '@riophae/vue-treeselect'
// import the styles
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  components: {
    Treeselect
  },
  data() {
    return {
      headerCellStyle: { // 表头单元格样式
        backgroundColor: '#f8faff'
      },
      pageData: { // 页面数据
        page: 1, // 当前页
        pageSize: 10 // 当前页显示多少条数据
      },
      tableData: [],
      loading: false,
      total: 0, // 总共多少数据
      options: [],
      normalizer(node) {
        return {
          label: node.name
        }
      },
      formData: {
        transportTaskId: '',
        startAgencyId: null,
        endAgencyId: null,
        intoStorageStartTime: '',
        intoStorageEndTime: '',
        isAvailable: ''
      },
      time: ''
    }
  },
  async created() {
    this.getCarRegisterList()
    this.getDepartTree()
  },
  methods: {
    // 获取页面数据
    async getCarRegisterList() {
      this.loading = false
      const res = await getCarRegisterListApi({ ...this.pageData, ...this.formData })
      // console.log(res)
      this.tableData = res.items
      this.total = +res.counts
      this.pageData.pageSize = 10
      this.pageData.page = 1
      this.loading = false
    },
    // 获取分页加载多少数据
    handleSizeChange(val) {
      this.pageData.pageSize = val
      this.getCarRegisterList()
    },
    // 获取分页点击数据
    handleCurrentChange(val) {
      this.pageData.page = val
      this.getCarRegisterList()
    },
    // 渲染tree结构
    async getDepartTree() {
      const res = JSON.parse(await getDepartTreeApi())
      // console.log(res)
      this.options = res
    },
    // 搜索
    async searchFn() {
      this.loading = true
      if (this.time) {
        this.formData.intoStorageStartTime = convertTime(this.time[0])
        this.formData.intoStorageEndTime = convertTime(this.time[1])
      }
      const res = await getCarRegisterListApi({ ...this.pageData, ...this.formData })
      this.tableData = res.items
      this.total = +res.counts
      this.loading = false
    },
    // 重置表单
    async resetFn() {
      this.time = ''
      this.formData = {
        intoStorageStartTime: '',
        intoStorageEndTime: ''
      }
      await this.$refs.formData.resetFields()
      this.getCarRegisterList()
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  .box-card{
    border: none;
    margin-bottom: 20px;
    overflow: revert;
  }
  .footer{
    padding-top: 20px;
  }
}
</style>
